<template>
  <div class="content">
    <div style="padding:8px 0 8px 0;border: 1px solid #ebebeb">
      <textarea rows="5" cols="80"></textarea>
      <div style="padding-right:10px;text-align:right;"><button @click.stop="publishBlog($event)">发表说说</button></div> 
    </div>
    <ul class="content-ul">
       <li :key="blog.id" v-for="blog in blogs">
          <div class="head-image"><img src="../../assets/僵尸哥.png"></div>
          <div class="author-info">
              <div>{{ blog.userName }}</div>
              <div>{{ blog.createdTime }} </div>
          </div>
          <div class="moments-content">{{ blog.content }}</div>
          <div class="moments-operation">
            <div>
              <a href="#" @click.stop="getClickInfo($event, blog.id)" class="moments-operation-a">评论</a>&nbsp;
              <a href="#">点赞</a>&nbsp;
              <a href="#">转发</a>
            </div>  
          </div>
          <hr>
          <ul class="comment-ul"> 
            <li  :key="comment.id" :id='`comment-${comment.id}`' v-for="comment in blog.commentList">
              <div class="head-image head-image-comment"><img src="../../assets/小脏脏.png"></div>
              <div class="author-info-comment">
                  <div>{{ comment.userName }}： {{ comment.content }}</div>
                  <div>{{ comment.createdTime }}  &nbsp;<a href="# " @click.stop="getClickInfo($event, blog.id)">回复</a> &nbsp;<a href="#">删除</a>&nbsp; <a href="#">举报</a></div>
              </div>                  
              <ul class="comment-response">
                <li :key='`${comment.id}-${index}`' v-for="(reply, index) in comment.replyList">
                  <div class="head-image head-image-comment"><img src="../../assets/logo.png"></div>
                  <div class="author-info-reply">
                      <div>{{ reply.userName }} &nbsp;回复&nbsp;{{ reply.replyUserName }}： {{ reply.replyContent }}</div>
                      <div>{{ reply.createdTime }}  &nbsp;<a href="#" @click.stop="getClickInfo($event, blog.id)">回复</a> &nbsp;<a href="#">删除</a>&nbsp; <a href="#">举报</a></div>
                  </div>                            
                  <div :class='`${blog.id}-blog`'  style="clear:both;width:540px;padding:8px 0 8px 0;text-align:left;display:none;">
                    <textarea rows="3" cols="70" @blur="textareaBlur($event)"></textarea>
                    <div @mousedown="preventFocus($event)" style="width:510px;right:30px;text-align:right;"><button  :userId='`${reply.userId}`' :userName='`${reply.userName}`' @click.stop="publishReply($event,comment.id)">发表</button></div>
                  </div>                       
                </li>
              </ul>
              <div :class='`${blog.id}-blog`'  style="clear:both;width:540px;padding:8px 0 8px 0;text-align:left;display:none;">
                <textarea rows="3" cols="70"  @blur="textareaBlur($event)"></textarea>
                <div @mousedown="preventFocus($event)" style="width:510px;right:30px;text-align:right;"><button :userId='`${comment.userId}`' :userName='`${comment.userName}`' @click.stop="publishReply($event,comment.id)" >发表</button></div>
              </div>
            </li>
          </ul>      
          <div :class='`${blog.id}-blog`' name="blogLastTextArea" style="clear:both;width:580px;text-align:left;">
            <textarea rows="3" cols="80"></textarea>
            <div style="width:580px;text-align:right;"><button :value='`${blog.id}`' @click.stop="publishComment($event, blog.id)" >发表</button></div>
          </div>
       </li>
    </ul>
    
    
  </div>
</template>

<script>

import API from '@/api/blogs.js'
export default {
  name: 'HouseInfo',
  data () {
    return {
      blogs:[
        {
          "id":"",
          "userId":"",
          "userName":"",
          "content":"",
          "additionalFile":[""],
          "createdTime":"",
          "commentList":[
            {
              "id":"",
              "blogId":"",
              "userId":"",
              "userName":"",
              "content":"",
              "createdTime":"",
              "replyList":[
                {
                  "replyUserId":"",
                  "replyUserName":"",
                  "commentId":"",
                  "userId":"",
                  "userName":"",
                  "replyContent":"",
                  "createdTime":""
                }               
              ]
            }
          ]
        }
      ]
    }
  },
  created () {
    console.log(this.routers)
    this.queryBlogList();

  },
  methods:{
    queryBlogList:function(){
      API.queryBlogList({}).then(res => {
        //请求成功
        //console.log("queryBlogList:"+ JSON.stringify(res));
        if(res.code == '00000000'){
          this.blogs = res.data;
        }
      }).catch(err => {
           //请求失败
           console.log("error:"+ err)
      })
    },
    getClickInfo:function(e, blog_id){
      let array = document.getElementsByClassName(blog_id+"-blog");
      let giveup = false; // 放弃正在编辑的评论
      for(var i = 0; i < array.length; i++){
        let textarea = array[i].firstChild;

        if(!giveup && textarea.value != ''){          
          if(confirm("您确认要放弃正在编辑的评论吗？")){
            giveup = true;
            textarea.value='';           
          }
        }
        if(giveup){
          textarea.value=''; 
        }
        if(giveup && array[i].getAttribute("name")!='blogLastTextArea'){
          array[i].style.display = 'none';
        }
      }
      let node = e.target.parentElement.parentElement.parentElement.lastChild//含有textarea的div

      for(var i = 0; i < array.length; i++){
        if(node != array[i]){
          array[i].style.display = 'none';
        }else{
          node.style.display = 'block';
          node.firstChild.focus(); 
        }
      } 
    },
    preventFocus:function(e){
      // 阻止textarea 失去焦点
      if(e && e.preventDefault){
        e.preventDefault();
      }else{
        window.event.returnValue = false;
      } 
      return false; 
    },
    textareaBlur:function(e){
      let clickDom = e.target;  // currentTarget 获取绑定失去焦点事件的节点
      if(clickDom.value=='') {
        clickDom.parentElement.style.display="none";
      }  
    },
    publishReply:function(e, key){
      e.stopPropagation();
      if(e.target.parentElement.previousElementSibling.value == ''){
        return;
      }
      console.log("发表回复"+ e.target.parentElement.previousElementSibling.value)
      let param = {
        commentId: key,
        replyContent: e.target.parentElement.previousElementSibling.value,
        userId:'5',
        userName:'广西小勇',
        replyUserId: e.target.getAttribute("userId"),
        replyUserName:e.target.getAttribute("userName")
      }
      console.log(param)
      API.addReply(param).then(res => {
        //请求成功
        console.log("addReply:"+ JSON.stringify(res));
        if(res.code == '00000000'){
          e.target.parentElement.parentElement.style.display = 'none'
          e.target.parentElement.previousElementSibling.value=''
          this.queryBlogList()
        }
      }).catch(err => {
           //请求失败
           console.log("error:"+ err)
      })
      
    },
    publishComment:function(e, key){
      e.stopPropagation()
      if(e.target.parentElement.previousElementSibling.value == ''){
        return;
      }
      console.log("发表评论"+ e.target.parentElement.previousElementSibling.value)

      let param = {
        blogId: key,
        content: e.target.parentElement.previousElementSibling.value,
        userId:'4',
        userName:'躺尸娃'
      }
      console.log("publishComment参数如下：")
      console.log(param)
      
      API.addBlogComment(param).then(res => {
        //请求成功
        console.log("addBlogComment请求成功:"+ JSON.stringify(res));
        if(res.code == '00000000'){
          e.target.parentElement.parentElement.style.display = 'none'
          e.target.parentElement.previousElementSibling.value=''
          this.queryBlogList();
        }
      }).catch(err => {
           //请求失败
           console.log("error:"+ err)
      })
    },
    publishBlog:function(e){
      e.stopPropagation()
      if(e.target.parentElement.previousElementSibling.value == ''){
        return;
      }
      console.log("发表说说"+ e.target.parentElement.previousElementSibling.value)

      let param = {
        content: e.target.parentElement.previousElementSibling.value,
        userId:'8',
        userName:'信宜小周',
        additionalFile:[],
        commentList:[]
      }
      console.log("publishBlog")
      console.log(param)
      
      API.addBlog(param).then(res => {
        //请求成功
        console.log("addBlog请求成功:"+ JSON.stringify(res));
        if(res.code == '00000000'){
          e.target.parentElement.previousElementSibling.value=''
          this.queryBlogList();
        }
      }).catch(err => {
           //请求失败
           console.log("error:"+ err)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
  box-sizing: border-box;
}
h1, h2 {
  font-weight: normal;
}
.content{
  width:600px;
  border:1px solid #ebebeb; 
  margin:0 auto; 
}
.content-ul>li{
  width:600px;
  border:1px solid  #ebebeb;
  margin-top:20px;
  padding:3px 10px 3px 10px;
  box-sizing: border-box;
}
.comment-ul>li{
  width:600px;
  padding:3px 10px 3px 10px;
  box-sizing: border-box;
}

.head-image{
  float: left;
}
.head-image img{
  width:50px;
  height:50px;
  border-radius: 50%;
  border:1px solid #708090;

}
.author-info{
  float: left;
  height:50px;
  margin-left:10px;
}
.author-info > div{
  height:25px;
  line-height: 25px;
  text-align: left;
}
.moments-content{
  clear:both;
  padding-top:5px;
  text-align: left;
  text-indent: 2em;
}
.moments-operation{
  line-height: 40px;
  height:40px;
}
.head-image-comment{
  width:45px;
  height:45px;
  float:left;
}
.head-image-comment img{
  width:45px;
  height:45px;
  border-radius: 50%;
  border:1px solid #708090;
}
.author-info-comment{
  float: left;
  width:525px;
  margin-left:10px;
}
.author-info-comment>div{
  text-align: left;
}
.author-info-reply{
  float: left;
  width:495px;
  margin-left:10px;
}
.author-info-reply>div{
  text-align: left;
}
.comment-response{
  clear:both;
  margin-left:30px;
  padding-top:5px;
}
.comment-response .author{
  width:540px;
}
input,textarea{
  border: 1px solid #ebebeb;
  border-radius: 2px;
}
button{
  border: none;
  outline: none;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  cursor: pointer;
  box-sizing: border-box;
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 4px;
}
textarea:focus{
  outline: 0;
  border: 1px solid #409EFF;
}


ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0px;
}
a {
  color: #42b983;
}
</style>
